<template>  
    <el-form :model="bookForm" ref="bookForm" label-width="120px">  
      <!-- ... 表单内容 ... -->  
      <el-form-item>  
        <el-button type="primary" @click="submitForm">添加</el-button>  
        <el-button @click="resetForm">重置</el-button>  
      </el-form-item>  
    </el-form>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        bookForm: {  
          id: null,  
          title: '',  
          author: '',  
          copies: 0  
        }  
      };  
    },  
    methods: {  
      submitForm() {  
        this.$refs.bookForm.validate(async (valid) => {  
          if (valid) {  
            this.$emit('book-added', { ...this.bookForm, id: this.generateId() });  
            this.resetForm();  
          } else {  
            console.log('表单验证失败!');  
            return false;  
          }  
        });  
      },  
      resetForm() {  
        this.$refs.bookForm.resetFields();  
      },  
      generateId() {  
        // 假设我们简单地通过当前时间戳生成ID  
        return Date.now();  
      }  
    }  
  }  
  </script>